<template>
  <div class="banner">
    <!-- 对话框区域 -->
    <div class="diagbox">
        <div class="eidtbox">
          <el-form :model="editObj" label-width="100px" :rules="rules" ref="editForm">
            <el-form-item label="轮播图名称:" prop="imgName">
              <el-input v-model="editObj.imgName"></el-input>
            </el-form-item>
            <el-form-item label="链接地址:" prop="linkUrl">
              <el-input v-model="editObj.linkUrl"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
              <el-radio-group v-model="editObj.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                :action="actionUrl"
                :headers="headers"
                :show-file-list="false"
                name="banner"
                :before-upload="beforeUpload"
                :on-success="handleAvatarSuccess"
              >            
                  <img v-if="editObj.imgUrl" :src="editObj.imgUrl" class="avatar" />
                  <i class="el-icon-plus avatar-uploader-icon" v-else></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="addBanner">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import {addBanner} from "@/api"
export default {
  data() {
    return {
      headers: { Authorization: "" },
      loading: false,
      editDiaShow: false,
      actionUrl:"http://192.168.1.9:3000/api/admin/upload/",
      editObj: {
        imgName: "",
        linkUrl: "",
        status: 1,
        imgUrl: ""
      },
      tableData: [],
      rules: {
        imgName: [
          { required: true, message: "轮播图名称不能为空", trigger: "blur" }
        ],
        linkUrl: [
          { required: true, message: "链接地址不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.headers.Authorization = "Bearer " + this.getUserInfo.token;
    // console.log(this.headers)
  },
  computed: {
    ...mapGetters("login",["getUserInfo"]),
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // console.log(res); 
      this.editObj.imgUrl = res.data.imgUrl;
    },
    beforeUpload(file) {
      // const isPNG = file.type === "image/png"; //如果是jpeg格式，true，false
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase
      // if (!isPNG) {
      //   this.$message.error("上传头像图片只能是 png 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isPNG && isLt2M;
      return isLt2M;
    },
    addBanner(){
      this.$refs.editForm.validate(vaild =>{
        if(vaild){
          if(this.editObj.imgUrl){
            addBanner(this.editObj).then(res =>{
              // console.log(res)
              if(res.code == 200 && res.msg == "添加成功"){
                this.$router.push({name:"bannerindex"})
              }
            })
          }else{
            this.$message.error("图片必须上传");
          }
        }
      })
      
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: calc(100vh - 98px);
  background: #fff;
  padding: 15px;
  .toolbar {
    margin-bottom: 20px;
    overflow: hidden;
    .left {
      float: left;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .eidtbox {
    width: 400px;
    margin: 0 auto;
  }
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  // overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.footer {
  width: 178px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
</style>